<template>
    <div>
        <div style="margin: 10px;background-color: #2eaa6a;border-radius: 10px;padding-bottom: 20px;">
            <div style="position: relative;height: 40px;">
                <img @click="back()" src="../../assets/img/left.png" style="width:30px;position:absolute;top: 10px;left: 10px;background-color: rgba(0,0,0,.4);border-radius: 50%">
            </div>
            <div style="text-align: center;color: #fff;margin-top: 40px;">
                <p style="font-size: 16px;line-height: 15px;">当前余额</p>
                <p style="font-size: 33px;line-height: 33px;">￥{{balance}}</p>
            </div>
            <div class="container-fluid" style="color: #fff;text-align: center;margin-top: 40px;">
                <div class="row">
                    <div class="col-xs-6">
                        <p style="font-size: 16px;">已提佣金</p>
                        <p>￥{{withdraw_fee}}</p>
                    </div>
                    <div class="col-xs-6">
                        <p style="font-size: 16px;">累计佣金</p>
                        <p>￥{{grand_total_fee}}</p>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin: 10px;background-color: #fff;border-radius: 10px;">
            <div class="container-fluid">
                <div class="row" style="padding: 30px;">
                    <div class="col-xs-6" style="text-align: center;">
                        <div @click="feeDetail">
                            <img style="width: 50px;" src="../../assets/img/redbag.jpg">
                            <p></p>
                            <a href="javascript:;">佣金明细</a>
                        </div>
                    </div>
                    <div class="col-xs-6" style="text-align: center;">
                        <div @click="withdraw">
                            <img style="width: 50px;" src="../../assets/img/coupon.jpg">
                            <p></p>
                            <a href="javascript:;">立即提现</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                balance: 0.00,
                withdraw_fee: 0.00,
                grand_total_fee: 0.00,
            }
        },
        created() {
        },
        mounted() {
            this.getUserInfo();

        },
        methods: {
            getUserInfo() {
                let that = this;
                this.api.center().then(res => {
                    if (res) {
                        that.balance = res.data.balance;
                        that.withdraw_fee = res.data.withdraw_fee;
                        that.grand_total_fee = res.data.grand_total_fee;
                    }
                });
            },
            back() {
                window.location.replace('/center');
            },
            withdraw() {
                window.location.href = 'withdraw';
            },
            feeDetail() {
                window.location.href = 'fee-detail';
            },
        },
    }
</script>
<style scoped>


</style>
